﻿var $carousel = $("#myCarousel").carousel({
  interval: 2000
});

$("#btn-cycle").click(function () {
  $carousel.carousel('cycle');
});
$("#btn-pause").click(function () {
  $carousel.carousel('pause');
});
$("#btn-slide2").click(function () {
  $carousel.carousel(1);
});
$("#btn-slide-prev").click(function () {
  $carousel.carousel('prev');
});
$("#btn-slide-next").click(function () {
  $carousel.carousel('next');
});

var myScroll;

function loaded() {
  myScroll = new iScroll('wrapper', {
    snap: true,
    momentum: false,
    hScrollbar: false,
    onScrollEnd: function () {
      document
        .querySelector('#indicator > li.active').className = '';
      document
        .querySelector('#indicator > li:nth-child(' + (this.currPageX + 1) + ')')
        .className = 'active';
    }
  });
}

document.addEventListener('DOMContentLoaded', loaded, false);

var count = document.getElementById("thelist").getElementsByTagName("img").length;
var columnCount = 3;
var count2 = document.getElementsByClassName("menuimg").length;
var eachWidth = document.body.clientWidth / 3;
for (i = 0; i < count; i++) {
  document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";
}

document.getElementById("scroller").style.cssText =
  " width:" + document.body.clientWidth * count + "px";

setInterval(function () {
  myScroll.scrollToPage('next', 0, 400, count);
}, 3500);

window.onresize = function () {
  for (i = 0; i < count; i++) {
    document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";
  }
  document.getElementById("scroller").style.cssText =
    " width:" + document.body.clientWidth * count + "px";
}